<template>
<div class="container-wid">

  <my-header></my-header>
  <!-- <div id="slider" data-block-text="false">
    <ul>
      <li data-background="static/image/a1.jpg"></li>
      <li data-background="static/image/a2.jpg"></li>
      <li data-background="static/image/a3.jpg"></li>
      <li data-background="static/image/a6.jpg"></li>
    </ul>
  </div> -->
  <form class="login-form">
    <div class="form-group">
      <label for="idnum">学号/工号</label>
      <input type="text" class="form-control" v-model="id" id="idnum" placeholder="学号/工号">
    </div>
    <div class="form-group">
      <label for="password">Password</label>
      <input type="password" class="form-control" v-model="password" id="password" placeholder="密码">
    </div>
    <div @click="login()" class="btn btn-default">Submit</div>
  </form>
  <!-- <div class="content">
    <div class="mid-display">
      <a class="outa" href="people.html">
        <div class="display display-1" id="">
          <div class="left">
            <img src="./img/4.jpg" class="hidecontent">
          </div>
          <div class="right">
            <h3>校友名录</h3>
            <span>武汉大学国际软件学院</span>
            <p class="subtitle">武大国软校友遍布全国各地</p>
            <div class="hidecontent">
              <p>aliwuhawieuhauwfh dfafrafr awfvasfva wefasdc wrfaer wefwe ssss</p>

            </div>
          </div>
        </div>
      </a>
      <a class="outa" href="people.html">
        <div class="display display-2" id="">
          <div class="left">
            <img src="./img/4.jpg" class="hidecontent">
          </div>
          <div class="right">
            <h3>风采展示</h3>
            <span>武汉大学国际软件学院</span>
            <p class="qqq">国软历届校友大赛风采生活</p>
            <div class="hidecontent">
              <p>aliwuhawieuhauwfh dfafrafr awfvasfva wefasdc wrfaer wefwe ssss</p>
            </div>
          </div>
        </div>

      </a>
      <a class="outa" href="people.html">
        <div class="display display-3" id="">
          <div class="left">
            <img src="./img/4.jpg" class="hidecontent">
          </div>
          <div class="right">
            <h3>新闻公告</h3>
            <span>武汉大学国际软件学院</span>
            <p class="qqq">国软日常事物及通知公告</p>
            <div class="hidecontent">
              <p>aliwuhawieuhauwfh dfafrafr awfvasfva wefasdc wrfaer wefwe ssss</p>
            </div>
          </div>
        </div>
        <div style="clear: both"></div>
      </a>
    </div>
  </div> -->

  <!-- <my-footer></my-footer> -->
</div>

</template>

<script>
import './js/main';
import myHeader from '../header/header.vue';
import myFooter from '../footer/footer.vue';
const qs = require('qs');
export default {
  name: 'index',
  data () {
    return {
      id:'',
      password:''
    }
  },
  components: {
    myHeader,
    myFooter
  },
  methods:{
    login(){
      console.log(this.id);
      const post_data = {
        id: this.id,
        password: this.password
      }
      this.axios({
        method: 'post',
        url: '/login',
        data: qs.stringify(post_data),
        headers:{
          'Content-Type':'application/x-www-form-urlencoded',
        },
      }).then(({data})=>{
        if(data.status){
          window.localStorage._t_s_l_ = data.data._t_s_l_ //登陆cookie
          window.localStorage.expire = data.data.expire //过期时间
          window.localStorage.permission = data.data.permission
          window.localStorage.id = this.id
          this.$router.push('/home') //登陆成功跳转
        }
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
@import "./css/index.less";

</style>
